<template>
	<view>
		<view class="uni-add-tips-box" :style="{top: top+'rpx'}" v-if="showTip">
		  <view class='uni-add-tips-content' @tap='hideTip'>
		    <text>{{tip}}</text>
		  </view>
		</view>
	</view>
</template>

<script>
	const SHOW_TIP = "SHOW_TIP"
	export default{
		data(){
			return{
				showTip:false,
			}
		},
		mounted() {
			this.showTip = !uni.getStorageInfoSync().keys.includes(SHOW_TIP)
			// setTimeout(()=>{
			// 	this.showTip = false
			// },this.duration*1000)
		},
		props:{
			tip:{
				type:String,
				default:"点击「添加小程序」，下次访问更便捷",
				required:true				
			},
			duration:{
				type:Number,
				default:5,
				required:false
			},
			top:{
				type:Number,
				default:0,
				required:false	
			}
		},
		methods:{
			hideTip(){
				uni.setStorageSync(SHOW_TIP,true)
				this.showTip = false
			}
		}
	}
</script>

<style lang="scss" scoped>
	$themeColor:#ff7919; //主题色
	.uni-add-tips-box {
	  position: fixed;
	  top:0;
	  right: 0;
	  z-index: 10;
	  opacity: 1;
	  display: flex;
	  justify-content: flex-end;
	  align-items: flex-end;
	  flex-direction: column;
	  animation: tiaobig 0.8s ease-in-out alternate infinite;
	}
	.uni-add-tips-content::before{
		content: "";
		position: absolute;
		width: 0;
		height: 0;
		top:-30upx;
		right:95upx;
		border-width: 20upx;
		border-style: solid;
		display: block;
		border-color:  transparent transparent $themeColor transparent;
	}
	.uni-add-tips-content {
	  border-width: 0upx;
	  margin-top: 15upx;
	  position: relative;
	  background-color: $themeColor;
	  box-shadow: 0 10upx 20upx -10upx $themeColor;
	  border-radius: 30upx;
	  display: flex;
	  align-items: center;
	  justify-content: center;
	  padding: 12upx 28upx;
	  margin-right: 20upx;
	}
	.uni-add-tips-content > text {
	  color: #fff;
	  font-size: 26upx;
	  font-weight: 400;
	}
	@keyframes tiaobig {
		0% {
			transform: translateY(0px);
		}
		100% {
			transform: translateY(4px);
		}
	}
</style>